<template>
	<nav-header title="设备">
		<view class="bg-white mb-4 pb-6">
			<u-swiper :list="productObj.fileList" height="200" @change="e => currentNum = e.current" indicatorStyle="left: 10px"
				 radius="0" bgColor="#ffffff" @click="swiperClick">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ productObj.fileList.length }}</text>
				</view>
			</u-swiper>
			<view class="mx-4 py-3 text-black-33 font-bold tracking-wide text-lg" v-text="productObj.name"></view>
			<view class="text-red-500 text-xl mx-4">
				<text class="text-base pr-1">¥</text>
				<text v-text="productObj.money"></text>
        <text class="text-base pr-1">{{'/'+productObj.moneyWay}}</text>
			</view>
		</view>
    <view class="bg-white px-4 mb-4">
      <view class="py-3 border-b-ee text-black-33 font-bold text-lg">基本信息</view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">设备型号：</text>
        <text class="text-black-33 leading-7" v-text="productObj.model || '暂无'"></text>
      </view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">设备分类：</text>
        <text class="text-black-33 leading-7" v-text="productObj.classify || '暂无'"></text>
      </view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">主要功能：</text>
        <text class="text-black-33 leading-7" v-text="productObj.introduce || '暂无'"></text>
      </view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">存放位置：</text>
        <text class="text-black-33 leading-7" v-text="productObj.location || '暂无'"></text>
      </view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">使用价格：</text>
        <text class="text-black-33 leading-7" v-text="productObj.moneyWay || '暂无'"></text>
      </view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">管理人：</text>
        <text class="text-black-33 leading-7" v-text="productObj.contact || '暂无'"></text>
      </view>
      <view class="flex justify-between items-center mb-2_5">
        <text class="text-gray-99">咨询电话：</text>
        <text class="text-black-33 leading-7" v-text="productObj.phone || '暂无'"></text>
      </view>
    </view>
    <view class="bg-white mb-4 p-4 pb-6">
      <view class="mb-4 px-2 pb-4 text-gray-66 font-bold border-b-ee">
        所属单位
      </view>
      <view class="flex items-center justify-between" @click="$util.myNavigateTo('/pages_home/lianmeng/company_detail?id=' + productObj.companyId)">
        <view class="flex items-center">
          <image :src="$util.formatImageIdUrl(productObj.companyLogo)" class="w-12 h-12"></image>
          <view class="flex-1 pl-3">
            <view class="text-black-33 font-bold" v-text="productObj.companyName"></view>
            <view class="mt-2 text-black-33 text-sm" v-text="productObj.businessScope || ''"></view>
          </view>
        </view>
        <u-icon name="arrow-right" color="#dcdcdc" size="20"></u-icon>
      </view>
    </view>

		<view class="bg-white mb-4 p-4 pb-6">
			<view class="mb-4 px-2 pb-4 text-gray-66 font-bold border-b-ee">
				设备详情
			</view>
			<u-parse :content="productObj.content"></u-parse>
		</view>
		<view class="bg-white mb-4 p-4 pb-6">
      <view class="bg-white w-full py-4 fixed bottom-0 z-50 shadow-lg">
        <view class="flex items-center mx-5">
          <view class="text-center mr-8">
            <i class="iconfont icon-fenxiang block text-xl text-color-a0"></i>
            <text class="text-gray-99 text-sm">分享</text>
          </view>
          <view  class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white mx-1 bg-green-900"
                 @click="phoneCall">电话联系</view>
          <view  class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white mx-1 bg-theme  "
                 @click="$util.myNavigateTo('/pages_mine/edit_user?businessType=companyProductApply&businessId='+productObj.id+'&businessName='+productObj.name)">使用申请</view>
        </view>
		  </view>
    </view>
	</nav-header>
</template>

<script>
	import NavHeader from '@/components/nav_header.vue'
	import * as unionApi from '@/interface/junchuang/union.js'
	export default {
		components: {
			NavHeader
		},
		data() {
			return {
				id: '',
				currentNum: 0,
				productObj: this.initObj({})
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onReady() {
			unionApi.getCompanyProductDetail(this.id).then(res=>{
				if (res.success) {
					Object.assign(this.productObj, res.data)
					if (res.data.minMoney && res.data.maxMoney) {
						this.productObj.money = parseInt(res.data.minMoney) + '-' + parseInt(res.data.maxMoney)
					}else {
						let money = res.data.minMoney || res.data.maxMoney
            if(money  == null){
               money = '0'
            }
						this.productObj.money = parseInt(money)
					}
          if(res.data.moneyWay == null){ this.productObj.moneyWay = '面议'}

					if (this.productObj.fileList.length > 0) {
						let urlList = []
						this.productObj.fileList.forEach(file=> {
							urlList.push(this.$util.formatImageIdUrl(file.id))
						})
						this.productObj.fileList = urlList
					}
          console.log("this.productObj",this.productObj)
				}
			})
		},
		swiperClick (index) {
			this.$util.picPreview(index, this.productObj.fileList)
		},
		methods: {
			initObj ({companyLogo, companyId, companyName, name, classify, introduce, content,cover, fileList = [], businessScope, minMoney, maxMoney, money,moneyWay,model,location,phone,contact,email}) {

        return {companyLogo, companyId, companyName, name, classify, introduce, content,cover, fileList, businessScope, minMoney, maxMoney, money,moneyWay,model,location,phone,contact,email}
			},
      phoneCall () {
        const v = this
        if (!v.productObj.phone) return
        if (v.platform == 'ios') {
          call()
        }else {
          wx.showActionSheet({
            itemList: [v.productObj.phone,'呼叫'],
            success:function(res){
              if(res.tapIndex==1){
                call()
              }
            }
          })
        }
        function call() {
          wx.makePhoneCall({
            phoneNumber: v.productObj.phone
          })
        }
      },
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			 color: #FFFFFF;
			 font-size: 12px;
		 }
	}
</style>
